import React, { useMemo } from 'react';
import { Button } from 'antd';
import styles from '../index.module.less';

export default function useColumns(actions) {
  const columns = useMemo(() => {
    return [
      {
        title: '序号',
        dataIndex: '__index',
        align: 'center',
        width: 60
      },
      {
        title: '用户名',
        dataIndex: 'name',
        width: 200
      },
      {
        title: '描述',
        dataIndex: 'description',
        width: 200
      },
      {
        title: '有效期',
        dataIndex: 'expireTime',
        width: 150
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        width: 150
      }
    ];
  }, []);

  const opts = [
    {
      title: '操作',
      dataIndex: 'operate',
      align: 'center',
      width: 120,
      fixed: 'right',
      render: (text, record) => {
        return (
          <div className={styles.operates}>
            <Button
              key="edit"
              className={styles.btn}
              type="link"
              onClick={() => actions.editItem(record)}
            >
              编辑
            </Button>
            <Button
              key="delete"
              className={styles.btn}
              type="link"
              onClick={() => actions.deleteItem({ id: record.id })}
            >
              删除
            </Button>
          </div>
        );
      }
    }
  ];

  return columns.concat(opts);
}
